<template>
	<view>
		<view class="nav2">
			<u-navbar title="确认订单" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="ml30 mr30">
			<view class="bgFff radius30 p30">
				<view class="flex-jus" @click="openUrl('/subpage/me/addressList?type=order')">
					<view class="flex flex-start" v-if="address.id">
						<image src="../../static/images/order/icon1.png" mode="" style="width: 36rpx;height: 36rpx;">
						</image>
						<view class="ml10 flex1">
							<view class="f26 c343">{{address.userAddr}} - {{address.houseNumber}}</view>
							<view class="f24 c666 mt10">{{address.realName}} {{address.phone}}</view>
						</view>
					</view>
					<view class="flex" v-else>
						<image src="../../static/images/order/icon1.png" mode="" style="width: 36rpx;height: 36rpx;">
						</image>
						<text class="c343 f26 ml10">选择地址</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="show_serve = true">
					<view class="flex">
						<image src="../../static/images/order/icon2.png" mode="" style="width: 36rpx;height: 36rpx;">
						</image>
						<text class="c343 f26 ml10">选择服务</text>
					</view>
					<view class="flex">
						<text class="c343 f26 mr10">{{selSku.name}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0 0 0"></u-line>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30" @click="show_remark = true">
				<view class="flex-jus">
					<view class="flex flex1">
						<text class="c343 f26">备注</text>
					</view>
					<view class="flex flex1">
						<text class="c343 f26 mr10 ml10 textoverflow2 flex1">{{remark}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="flex">
						<text class="c343 f26">支付方式</text>
					</view>
					<view class="flex">
						<text class="c343 f26 mr10">微信支付</text>
						<image src="../../static/images/order/wx.png" mode="" style="width: 40rpx;height: 40rpx;">
						</image>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0 0 0"></u-line>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30">
				<view class="flex-jus">
					<view class="flex">
						<text class="c343 f26 bold">购买须知</text>
					</view>
					<view>
						<u-button color="#fff4ec" :customStyle="{'color':'#FF7F1C','height':'50rpx','fontSize':'24rpx'}"
							shape="circle" @click="show_buynote = true">查看购买须知</u-button>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="c666 f26 textoverflow2">
					<u-parse :content="buyNotice.protText"></u-parse>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex">
					<u-checkbox-group v-model="checked">
						<u-checkbox shape="circle" size="14" activeColor="#FFDE6D" labelSize="12" label="我已阅读并同意"
							:name="true">
						</u-checkbox>
					</u-checkbox-group>
					<text class="f24 blue" @click="nologinJump('/subpage/news/detail?code=5')">《“东楚畅通”服务协议》</text>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="textC" @click="maketel(config.phone)">
				<image src="../static/housekeeping/kf.png" mode="widthFix" style="width: 30%;"></image>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot">
			<view class="fix-bot-box ml30 mr30 bgFff p20 radius30 flex-jus">
				<view class="cyellow">
					<text class="f24">￥</text>
					<text class="f40 bold">{{selSku.price}}</text>
				</view>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'80rpx'}" shape="circle" throttleTime="500"
						@click="pay">预约并支付</u-button>
				</view>
			</view>
		</view>
		<!-- //选择服务 -->
		<u-popup :show="show_serve" @close="show_serve = false" @open="show_serve = true" closeable round="20">
			<view class="p30">
				<view class="flex flex-start">
					<u-image :src="api_host + waitSku.image" mode="" width="98px" height="98px"
						radius="10"></u-image>
					<view class="ml10 p10">
						<view class="c343">{{p_name}}</view>
						<u-gap height="5"></u-gap>
						<view class="c999 f24">已选：{{waitSku.name}}</view>
						<u-gap height="20"></u-gap>
						<view class="cyellow">
							<text class="f24">￥</text>
							<text class="f32">{{waitSku.price}}</text>
						</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="bgF7 p30 radiusBox ser_item flex-jus f26 mb30"
					:class="waitSku.id == item.id?'active':''" v-for="(item,index) in skuList" :key="item.id"
					@click="selBtn(item,'sku')">
					<text class="c343">{{item.name}}</text>
					<view class="c343">
						<text class="f24">￥</text>
						<text class="f28">{{item.price}}</text>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'90rpx'}" shape="circle"
						@click="selBtn('','sureSku')">确认选择</u-button>
				</view>
				<u-gap height="10"></u-gap>
			</view>
		</u-popup>
		<!-- //订单备注 -->
		<u-popup :show="show_remark" @close="show_remark = false" @open="show_remark = true" closeable round="20">
			<view class="p30">
				<view class="f28 c343 bold">订单备注</view>
				<u-gap height="20"></u-gap>
				<view class="flex flex-wrap">
					<view class="m10" v-for="(item,index) in remarkList" :key="index">
						<u-button color="#f7f7f7" :customStyle="{'color':'#34314F','height':'60rpx','fontSize':'24rpx'}"
							shape="circle" @click="chooseRemark(item)">{{item.dictLabel}}</u-button>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view>
					<u--textarea v-model="remark1" placeholder="请输入其他备注事项" height="200rpx" border="surround"></u--textarea>
				</view>
				<u-gap height="20"></u-gap>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'90rpx'}" shape="circle"
						@click="selBtn('','remark')">确认选择</u-button>
				</view>
			</view>
		</u-popup>
		<!-- //购买须知 -->
		<u-popup :show="show_buynote" @close="show_buynote = false" @open="show_buynote = true" closeable round="20">
			<view class="p30">
				<view class="f28 c343 bold">{{buyNotice.protName}}</view>
				<u-gap height="20"></u-gap>
				<view class="f26">
					<u-parse :content="buyNotice.protText"></u-parse>
				</view>
				<u-gap height="20"></u-gap>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'90rpx'}" shape="circle"
						@click="show_buynote = false">我已知晓</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getProtocolBycode,
		getdefAddr,
		getDictdata
	} from '@/common/api_user.js'
	import {
		getLocksku
	} from '@/common/api_housekeeping.js'
	import {
		createOrder,
		payOrder
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				notice:'亲爱的用户，感谢您选择东楚畅通服务。我们注意到您填写的地址目前尚未覆盖在我们的服务区域内。为了提供更优质的服务体验，我们目前仅在黄石市的黄石港区、下陆区和西塞山区提供服务。请您放心，我们正积极扩展服务范围，未来将有更多区域加入我们的服务版图。请您持续关注我们的更新，期待不久的将来能为您提供服务。再次感谢您的理解与支持！',
				p_name:'',
				id: '',
				detail: {},
				address: {},
				skuList: [],
				selSku: {},
				waitSku:{},
				show_serve: false,
				show_remark: false,
				show_buynote: false,
				buyNotice: {},
				checked: [],
				remark: '',
				remark1: '',
				remarkList: []
			}
		},
		onLoad(option) {
			this.getDictdata()
			this.id = option.id
			this.selSku.id = option.sku_id
			this.p_name = option.p_name
			this.getLocksku()
			this.getBuyNotice()
		},
		onShow() {
			this.getdefAddr()
		},
		methods: {
			async getDictdata() { //下单备注
				const res = await getDictdata({
					dictType: 'sys_lock_order_remark'
				})
				if (res.code == 200) {
					this.remarkList = res.data
				}
			},
			async getBuyNotice() { //购买须知
				uni.showLoading({
					mask: true
				})
				const res = await getProtocolBycode({
					code: '6'
				})
				if (res.code == 200) {
					this.buyNotice = res.data
				}
				uni.hideLoading()
			},
			async getdefAddr() { //获取用户默认地址
				uni.showLoading({
					mask: true
				})
				const res = await getdefAddr()
				if (res.code == 200) {
					let data = res.data
					if (data && data.id) {
						if (data.userAddr.indexOf('黄石港区') != -1 || data.userAddr.indexOf('下陆区') != -1 || data.userAddr
							.indexOf('西塞山区') != -1) {
								this.address = res.data
						}else{
							this.address = {}
							uni.showModal({
								title:'提示',
								content:this.notice,
								showCancel:false
							})
						}
					}else{
						this.address = {}
					}
				}
				uni.hideLoading()
			},
			async getLocksku(){
				uni.showLoading({
					mask:true
				})	
				const res = await getLocksku({
					id:this.id
				})
				if(res.code == 200){
					this.skuList = res.data
					this.selSku = this.skuList.find(item => item.id == this.selSku.id)
					this.waitSku = this.selSku
				}
				uni.hideLoading()
			},
			chooseRemark(item) {
				this.remark1 = this.remark1 + item.dictLabel
			},
			selBtn(item, type) {
				switch (type) {
					case 'sku':
						this.waitSku = item
						//this.show_serve = false
						break;
					case 'sureSku':
						this.selSku = this.waitSku
						this.show_serve = false
						break;
					case 'remark':
						if (!this.remark1) {
							uni.showToast({
								title: '请填写备注',
								icon: 'none'
							})
							return false
						}
						this.remark = this.remark1
						this.show_remark = false
						break;
				}
			},
			async pay() {
				if (!this.address.id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return false
				}
				if (!this.checked[0]) {
					uni.showToast({
						title: '我请阅读并同意《“东楚畅通”服务协议》',
						icon: 'none'
					})
					return false
				}
				let orderDetails = []
				orderDetails = [{
					wareId: this.selSku.id,
					buyCount: 1,
					price: this.selSku.price
				}]
				let data = {
					proId: this.id,
					addrId: this.address.id,
					timePeriod: '',
					coupId: '',
					orderType: '2',
					orderDetails,
					remark: this.remark
				}
				uni.showLoading({
					mask: true
				})
				const res = await createOrder(data)
				if (res.code == 200) {
					this.payOrder(res.data.id)
				}
				uni.hideLoading()
			},
			async payOrder(order_id) {
				// #ifdef MP-WEIXIN				
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.order);				
				// #endif
				uni.showLoading({
					mask: true,
					title: '正在支付中...'
				})
				const res = await payOrder({
					id: order_id
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								success() {
									uni.redirectTo({
										url: '/subpage/order/detail?id=' + order_id
									})
								}
							})
						},
						fail(err) {
							console.log(222,err);
							uni.hideLoading()
							uni.showToast({
								title: '支付取消',
								icon: 'error'
							})
							setTimeout(() =>{
								uni.redirectTo({
									url: '/subpage/order/detail?id=' + order_id
								})
							},500)
						}
					})
				}
				uni.hideLoading()

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.disabled {
		color: #ddd;
	}

	.day_active {
		background-color: #fff;

		* {
			color: #FF7F1C;
		}
	}

	.time_active {
		color: #FF7F1C;
	}

	.fix-bot {
		bottom: 20rpx;
	}

	.ser_item {
		border: 1px solid transparent;
	}

	.active {
		border-color: #FF7F1C;
		background-color: #FFF6EF;

		* {
			color: #FF7F1C;
		}
	}

	.pop-scroll-box {
		height: 700rpx;
		overflow-y: scroll;
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.yhq_check {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>